<template>
	<div class="gonglue">
		<div class="wrap-full">
			<!-- 版纳图 -->
			<div class="page-top-img">
				<img src="http://www.wuzhen.com.cn/uploads/navphone/2017122711231660443.jpg" class="show-other" alt=""
					title="">
			</div>
			<!-- 住宿标题 -->
			<div class="wrap">
 
				<div class="title-block">
					<div>游记攻略</div>
				</div>

				<ul class="page-nav">
					<li><a href="/">首页 &gt;</a></li>
					<li><a href="/web/vacation/holidaylist">出行锦囊 &gt;</a></li>
					<li class="active"><a href="#">游记攻略 &gt;</a></li>
				</ul>

			</div>
		</div>
		<!-- swiper -->
		<div class="swiper">
			<Swiper>
				<div class="swiper-slide" v-for="item in swiper" :key="item">
					<img :src="item" alt="" width="100%">
				</div>
			</Swiper>
		</div>
		<!-- 推荐攻略 -->
		<div class="tuijian">
			<p>推荐攻略</p>
			<div class="box" v-for="item in hotelList" :key="item.id">
			<div class="left">
			<img :src="item.imageUrl" >	
			</div>
			<div class="right">
			<h3>{{item.title}}</h3>
			<div style="margin-bottom:30px;"><img src="https://gboss.wtown.com/pc/images/star_10.png" style="margin-right: 18px;"><small>{{item.addDate}}</small></div>
				<p>{{item.summary}}</p>
				<a href="#">了解更多</a>
			</div>	
			</div>



		</div>


	</div>
</template>

<script>
	import Swiper from '@/components/liswiper.vue'
	export default {
		data() {
			return {
				hotelList: [],
				swiper: [
					"http://www.wuzhen.com.cn/uploads/day/2018052410422581808.jpg",
					"http://www.wuzhen.com.cn/uploads/day/2018052509192888108.jpg",
					"http://www.wuzhen.com.cn/uploads/day/2018052509195481132.jpg",
					"http://www.wuzhen.com.cn/uploads/day/2018052410393845384.jpg",
				],


			}

		},
		components: {
			Swiper
		},
		created() {
			this.getHotelList();
		},
		methods: {
			getHotelList() {
				fetch("/api/cms/v1/1/content/pages", {
						method: "POST",
						headers: {
							"Content-Type": "application/json;charset=UTF-8"
						},
						body: `{"publishStatus":true,"channelId":43,"keyword":""}`
					})
					.then(res => res.json())
					.then(res => {
						console.log("list", res)
						this.hotelList = res.list
					})
			}
		}

	}
</script>

<style>
	@import url("../assets/chushihua.css");
	@import url("../assets/gonglue.css");
</style>
